<template>
	<view class="timeLine">
		<view class="timeLine-icon">
			<i class="iconfont icon-bofang l_c" v-show="!isPlay" @click="radarPlay(true)" name="play"> </i>
			<i class="iconfont icon-zanting l_c" v-show="isPlay" @click="radarPlay(false)" name="suspend"></i>
			<!-- <tui-icon color="#61A9FF"></tui-icon>
      <tui-icon color="#61A9FF"></tui-icon> -->
		</view>
		<view class="timeLine-step">
			<view class="timeLine-index" v-if="index">
				<view class="empy" :style="{ width: (100 / (items.length - 1)) * index + '%' }"></view>
				<view class="bg">
					<view class="ybicon">预报</view>
				</view>
			</view>
			<slider
				class="timeLine-slider"
				@changing="(e) => changing(e.detail.value)"
				@change="(e) => sliderCG(e.detail.value)"
				:min="0"
				:max="items.length - 1"
				backgroundColor="#D6D6D6"
				activeColor="#007aff"
				:block-size="15"
				v-model="activeSteps"
				:step="1"
			/>
			<view class="timeLine-desc">
				<view
					v-for="(item, index) in items"
					:key="index"
					class="desc-item"
					:style="{
						left: (100 / (items.length - 1)) * index + '%'
					}"
				>
					<view class="timeLine-icon-item">
						<view v-if="activeSteps === index && toolTip" class="tui-tooltip">{{ item.desc }}</view>

						<text
							:style="{
								visibility: index < activeSteps ? 'hidden' : 'visible',
								background: index < activeSteps ? '#0A7AFF' : '#999'
							}"
						></text>
					</view>

					<text
						class="timeLine-tile-desc"
						:style="{
							color: index == activeSteps ? '#0A7AFF' : '#000',
							visibility: index % splitIndex != 0 ? 'hidden' : 'visible'
						}"
					>
						{{ item.desc }}</text
					>
				</view>
			</view>
		</view>
		<!-- <image src="../../static/image/common/donwload.png" @click="downLoad()" class="icon-down"></image> -->
	</view>
</template>
<script>
	import { debounce } from '@/utils/util'
	export default {
		name: '',
		props: {
			splitIndex: {
				type: Number,
				default: 1
			},
			index: {
				type: null,
				default: null
			},
			toolTip: {
				type: Boolean,
				default: true
			},
			items: {
				type: Array,
				default: () => []
				//    title: '',
				//    desc: '17:50',
			}
		},
		components: {},
		data() {
			return {
				activeSteps: 0,
				isPlay: false
			}
		},
		methods: {
			resultDownload(url, name) {
				console.info(`url:`, url)
				const $link = document.createElement('a')
				$link.href = url
				$link.download = name
				$link.click()
				document.body.appendChild($link)
				document.body.removeChild($link) // 下载完成移除元素

				// document.body.removeChild(elink)
				// window.URL.revokeObjectURL($link.href) // 释放掉blob对象
			},
			getFileName(name) {
				return name.substring(0, name.lastIndexOf('.'))
			},
			downLoad() {
				const name = this.getFileName(this.items[this.activeSteps].url)
				this.resultDownload(this.items[this.activeSteps].url, name)
				// uni.downloadFile({
				// 	url: this.items[this.activeSteps].url,
				// 	success: (res) => {
				// 		if (res.statusCode === 200) {
				// 			console.info(`res:`, res)
				// 			const name = this.getFileName(this.items[this.activeSteps].url)
				// 			this.resultDownload(res.tempFilePath, name)
				// 			uni.showToast({
				// 				title: '下载成功',
				// 				icon: 'success'
				// 			})
				// 		}
				// 	}
				// })
			},
			stop() {
				if (this.timer) {
					this.isPlay = false
					clearInterval(this.timer)
				}
			},
			changing(value) {
				this.activeSteps = value
				//  this.$emit('change', value)
			},
			sliderCG(value) {
				// console.log(`item:`, value)
				this.activeSteps = value
			},
			stepsCK(item) {
				this.activeSteps = item.index
				console.log(`item:`, item)
				this.$emit('change', item)
			},
			radarPlay(isPlay) {
				this.isPlay = isPlay
				if (isPlay) {
					this.rardarPlayEv()
				} else {
					if (this.timer) {
						clearInterval(this.timer)
					}
				}
			},
			rardarPlayEv() {
				if (this.timer) {
					clearInterval(this.timer)
				}
				this.timer = setInterval(() => {
					console.log(`this.items.lengththis.items.length:`, this.items.length)
					this.activeSteps++
					if (this.activeSteps > this.items.length - 1) {
						this.activeSteps = 0
					}
					console.log(` this.activeSteps:`, this.activeSteps)
				}, 1000)
			},
			setIndex(value) {
				this.stop()
				this.activeSteps = value
				this.emit()
			},
			emit: debounce(function name(params) {
				this.$emit('change', this.activeSteps)
			}, 100)
		},
		computed: {},
		watch: {
			activeSteps() {
				this.emit()
				// this.$emit('change', this.activeSteps)
			}
		},
		mounted() {}
	}
</script>
<style lang="scss">
	/deep/.uni-slider-thumb {
		border: 5rpx solid #007aff;
	}
	.timeLine {
		width: 100%;
		display: flex;
		align-items: center;
		padding: 0 20rpx;
		// padding: 0 20rpx;
		/deep/.tui-step-ico {
			// width: 9px !important;
			// height: 9px !important;
		}
		/deep/ .tui-icon-check {
			display: none;
		}
		.timeLine-icon {
			z-index: 999;
			color: #fff;
			width: 30rpx;
		}
		.timeLine-step {
			width: calc(100% - 60rpx);
			position: relative;
			padding: 0 0rpx 20rpx 40rpx;
			.timeLine-slider {
				margin: 0;
			}
		}
		.timeLine-desc {
			width: 100%;
			display: flex;
			font-size: 12px;
			transform: translateY(-3rpx);
			position: relative;
			.desc-item {
				position: absolute;
				flex: 1;
				text-align: left;
				transform: translateX(-50%);
				.timeLine-icon-item {
					text-align: center;
					text {
						position: absolute;
						display: inline-block;
						width: 8rpx;
						height: 8rpx;
						transform: translateY(-19rpx);
						border-radius: 50%;
						background: #69a1ff !important;
						display: none;
					}
				}
			}
			.timeLine-tile-desc {
				white-space: nowrap;
			}
			.tui-tooltip {
				position: absolute;
				width: 86rpx;
				height: 39rpx;
				background: #007aff; //, linear-gradient(132deg, #7e8eff 0%, #69a1ff 46%, #51bbef 100%);;
				transform: translateY(-85rpx) translateX(-20%);
				border-radius: 15rpx;
				font-size: 12px;
				line-height: 39rpx;
				padding: 0 10rpx;
				color: #fff;
			}
			.tui-tooltip::after {
				content: '';
				position: absolute;
				bottom: -50%;
				left: 50%;
				margin-left: -5px;
				border-width: 5px;
				border-style: solid;
				border-color: #69a1ff transparent transparent transparent;
			}
		}
		.timeLine-index {
			position: absolute;
			left: 0;
			top: -42rpx;
			height: 60rpx;
			width: calc(100% - 80rpx);
			left: 40rpx;
			font-size: 20rpx;
			display: flex;
			.empy {
				height: 100%;
			}
			.bg {
				flex: 1;
				height: 100%;
				background: rgba(97, 169, 255, 0.21);
				.ybicon {
					width: 50rpx;
					text-align: center;
					color: #fff;
					background: linear-gradient(132deg, #7e8eff 0%, #69a1ff 46%, #51bbef 100%);
				}
			}
		}
		.icon-down {
			width: 40rpx;
			height: 40rpx;
		}
	}
</style>
